<template>
  <div class="crty">
      <div class="werq">
          <div class="ddii" v-for="(v,i) in arr" :key="i">
              <div class="xi"><img :src="v.img"></div>
              <p>{{v.name}}</p>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[
                {name:"全球房源",img:"img/h1.jpg"},
                {name:"视频看房",img:"img/h2.jpg"},
                {name:"联系我们",img:"img/h3.jpg"},
                {name:"置业顾问",img:"img/h4.jpg"},
                {name:"问答",img:"img/h5.jpg"}
            ]
        }
    }
}
</script>

<style scoped>
.crty{
    width: 100%;
    height: .88rem;
}
.werq{
    width: 90%;
    height: .88rem;
    margin: auto;
    /* background: palegreen; */
    display: flex;
}
.werq .ddii{
    width: 20%;
    height: 100%;
    /* border: 1px solid blue; */
}
.werq .ddii .xi{
    width: .36rem;
    height: .31rem;
    /* border: 1px solid red; */
    margin: .22rem 0 .1rem .2rem;
}
.werq .ddii .xi img{
    width: 100%;
    height: 100%;
}
.werq .ddii p{
    font-size: .13rem;
    text-align: center;
}
</style>